<link rel="stylesheet" href="/packages/resource/pintuer/pintuer.css">
<script src="/packages/resource/pintuer/pintuer.js"></script>
<div class="pintuer">
    <div class="padding margin-left" style="background: #fff;">
        <h5 class="text-blue">
            手动添加订单
        </h5>
        <hr>


        <form class="form-x" method="post" action="/shop/?act=convert_order&op=manual_submit" id="manual_submit">
            <?php
            $list = array(
                'buyerName'       => '购买人姓名',
                'buyerMobile'     => '购买人手机号码',
                'orderSn'         => '订单号',
                'payAmount'       => '支付金额',
                'payType'         => '支付方式',
                'payTime'         => '支付时间',
                'paySn'           => '支付单号',
                'consignee'       => '收货人姓名',
                'idNumber'        => '收货人身份证号码',
                'address'         => '收货地址',
                'consigneeMobile' => '收货人手机号码',
//            'orderGoods'      => '商品详情',
            );
            foreach ($list as $k => $v) {
                ?>
                <div class="form-group">
                    <div class="label">
                        <?php
                        echo $v;
                        ?>
                        ：
                    </div>
                    <div class="field">
                        <input type="text" id="<?php echo $k; ?>" name="<?php echo $k ?>" class="input input"
                               data-validate="required:<?php echo $v ?>不能为空<?php
                               if (preg_match("/Mobile/", $k)) {
                                   echo ",tel:" . $v . "格式错误";
                               } else if (preg_match("/Amount/", $k)) {
                                   echo ",currency:货币格式错误";
                               } else if ($k == 'idNumber') {
                                   echo ",regexp#^(\\d{15}$|^\\d{18}$|^\\d{17}(\\d|X|x))$:身份证号码格式不对";
                               }


                               ?>">
                    </div>
                </div>
                <?php
            }
            ?>
            <div class="form-group">
                <div class="label">
                    地区代码：
                </div>
                <div class="field">
                    <select name="provinceCode">
                        <option value="">请选择省</option>
                        <?php
                        $a1 = Model('area')->where(array('area_deep' => 1))->select();
                        foreach ($a1 as $val) {
                            ?>
                            <option value="<?php echo $val['area_code'] ?>"
                                    data-id="<?php echo $val['area_id'] ?>"><?php echo $val['area_name'] ?>
                                (<?php echo $val['area_code'] ?>)
                            </option>
                            <?php
                        }
                        ?>
                    </select>
                    <select name="cityCode" id="">
                        <option value="">请选择市</option>
                    </select>
                    <select name="areaCode" id="">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    商品详情：
                </div>
                <div class="field" ms-controller="order_goods">
                    <table class="table table-bordered">
                        <tr class="thead">
                            <th>
                                商品ID
                            </th>
                            <th>
                                商品价格
                            </th>
                            <th>
                                商品数量
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                        <tr ms-repeat="list">
                            <td>
                                <input type="text" name="goodsId[]" class="input" ms-duplex="el.goodsId">
                            </td>
                            <td>
                                <input type="text" name="price[]" class="input" ms-duplex="el.price">
                            </td>
                            <td>
                                <input type="text" name="num[]" class="input" ms-duplex="el.num">
                            </td>
                            <td>
                                <button type="button" class="button bg-blue button-small" ms-click="$remove">删除商品</button>
                            </td>
                        </tr>

                        <tfoot>
                        <tr>
                            <td colspan="100">
                                <button type="button" class="button bg-blue button-small" ms-click="add()">
                                    <span class="icon-plus">添加商品</span>
                                </button>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="line text-center margin-top padding-bottom">
                <button type='button' class="button bg-blue" id="submit_form">
                    提交订单信息
                </button>
            </div>
        </form>
    </div>

</div>
<script src="/packages/resource/laydate/laydate.js"></script>
<script src="/data/resource/js/avalon.js"></script>
<script>
    $('#payTime').prop({
        readonly: true
    });

    var order_goods = avalon.define({
        $id: 'order_goods',
        'list': [],
        add : function () {
            order_goods.list.push({
                goodsId : '',
                price : '',
                num : ''
            })
        }
    });

    $('#submit_form').click(function () {
        $('#manual_submit').ajaxSubmit(function () {
            var data = $('#manual_submit').serialize();
            var index = layer.load();
            $.ajax({
                type : "post",
                url : "/shop/?act=convert_order&op=manual_submit",
                data : data,
                success : function (msg) {
                    layer.close(index);
                    var callback = (msg == '推送成功') ? function () {
                        location.href = '/shop/?act=convert_order&op=list';
                    } : null;
                    layer.msg(msg,callback);
                }
            })
        })
    })
</script>
<script>
    laydate({
        elem: '#payTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'click', //响应事件。如果没有传入event，则按照默认的click
        format: 'YYYY/MM/DD hh:mm:ss',
        istime: true
    });
</script>

<script>
    $('[name=provinceCode],[name=cityCode],[name=areaCode]').change(function () {
        var next = $(this).next();
        if (!next.length) {
            return;
        }
        var _this = $(this);
        _this.nextAll().each(function () {
            $(this).find('option:gt(0)').remove();
        })

        layer.load();
        $.ajax({
            url: '/shop/?act=convert_order&op=get_next_area&id=' + _this.find("option:selected").attr('data-id'),
            dataType: 'json',
            success: function (msg) {
                layer.closeAll();

                for (var i in msg) {
                    next.append("<option value=" + msg[i].area_code + " data-id=" + msg[i].area_id + ">" + msg[i].area_name + "(" + msg[i].area_code + ")</option>");
                }
            }
        });

    });
</script>